<!DOCTYPE html>
<html>
<head>
	<% include link %>
</head>
<body>
	<% include head %>
	<nav class="navbawr" style="margin-top:80px;">
		<div class="col-sm-4 col-sm-offset-4">
			<form action="/log/reg" method="post" id="reg_form">
				<h3 style="width:100%;text-align: center;color:#666;">注册 PASUPASU</h3>
				<div class="form-group">
					<label for="exampleInputEmail1">用户名</label>
					<input type="text" class="form-control" name="name" id="username" placeholder="Name" data-container="body" data-toggle="popover" data-placement="right"
            		data-content="" >
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">密码</label>
					<input type="password" class="form-control" name="password" id="Password" placeholder="Password">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">确认密码</label>
					<input type="password" class="form-control" name="rePassword" id="RePassword" placeholder="Repeat Password">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">邮箱</label>
					<input type="email" class="form-control" name="email" id="email" placeholder="Email">
				</div>
				<button id="submit" type="submit" class="button button-glow button-rounded button-raised button-primary" style="display: block ;margin: 0px auto ;">注册</button>
			</form>
		</div>
	</nav>
</body>
<script type="text/javascript">
	//变量与配置
	var status1 = false, status2 = false, status3 = false, status4 = false, status5 = false;
	var patt = new RegExp(/^\w{6,16}$/)
	var patt2 = new RegExp(/[\@]+[\w]+(\.com)/)

	//ajax查询用户名
	function selectName(obj,name, callback){
		var thisName = name.replace(/\s+/g, "");
		$.ajax({
			url:'/log/ajaxUsername?selectName=' + thisName,
			type:'get',
			success:function(date){
				if (date.status && thisName != '') {
					obj.parent('.form-group').removeClass('has-error');
					obj.parent('.form-group').addClass('has-success');
					obj.attr("data-content","此用户名可以注册!");
					obj.popover('show');
					// Messenger().post({message:"此用户名可以注册", hideAfter:1,});
					status1 = true
					callback()
				} else {
					obj.parent('.form-group').addClass('has-error');
					obj.attr("data-content","用户名格式不合格或已存在");
					obj.popover('show');
					// Messenger().post({message:"用户名已存在", hideAfter:1,});
					status1 = false
					callback()
				}
			}
		})
	}

	//判断所有status
	function checkStatus(){
		if (status1 && status2 && status3 && status4 && status5) {
			$('#submit').removeAttr('disabled')
		} else {
			console.log('1:'+status1+' 2:'+status2+' 3:'+ status3+' 4:'+status4+' 5:'+status5)
			$('#submit').attr({'disabled':'disabled'})
		}
	}


	$("#reg_form").submit(function(e){
	 	if (status1 && status2 && status3 && status4 && status5) {
	 		Messenger().post({message:"注册成功", hideAfter:2,});
			return;
		} else {
			e.preventDefault();
			Messenger().post({message:"注册信息有误", hideAfter:2,});
		}
	});

	//用户名的判断
	$('#username').bind('input propertychange', function() {
		selectName($(this),$(this).val(), function(){
			$(this).popover('hide');
		})
	})

	//密码的长度
	$('#Password').bind('input propertychange', function() {
		var value1 = $(this).val()
		var value2 = $('#RePassword').val()
		if (patt.test(value1)) {
			status2 = true
			$(this).parent('.form-group').removeClass('has-error');
			$(this).parent('.form-group').addClass('has-success');
			// Messenger().post({message:"密码合格", hideAfter:1,});
		} else {
			status2 = false
			$(this).parent('.form-group').addClass('has-error');
			// Messenger().post({message:"密码不合格", hideAfter:1,});
		}
		if (value1 == value2 && value1 != '') {
			status5 = true
		} else {
			status5 = false
		}
	})
	
	//重复密码是否相同
	$('#RePassword').bind('input propertychange', function() {
		var value1 = $('#Password').val()
		var value2 = $(this).val()
		if (value2 == value1) {
			status3 = true
			status5 = true
			// Messenger().post({message:"重复密码合格", hideAfter:1,});
			$(this).parent('.form-group').removeClass('has-error');
			$(this).parent('.form-group').addClass('has-success');
		} else {
			status3 = false
			$(this).parent('.form-group').addClass('has-error');
			// Messenger().post({message:"重复密码不合格", hideAfter:1,});
		}
	})

	//邮箱
	$('#email').bind('input propertychange', function() {
		var value = $(this).val()
		if (patt2.test(value)) {
			status4 = true
			$(this).parent('.form-group').removeClass('has-error');
			$(this).parent('.form-group').addClass('has-success');
			// Messenger().post({message:"邮箱 success", hideAfter:1,});
		} else {
			$(this).parent('.form-group').addClass('has-error');
			status4 = false
		}
	})
	
</script>
</html>